<template>
  <div class="page-content" v-loading="loading">
    <el-row :gutter="10">
      <el-col
        :xs="12"
        :sm="8"
        :lg="4"
        style="padding-left: 10px; padding-right: 10px;"
      >
        <el-card shadow="always" class="float-e-margins">
          <h5>月销售额</h5>
          <h2>{{ zjine }}</h2>
        </el-card>
      </el-col>
      <el-col
        :xs="12"
        :sm="8"
        :lg="4"
        style="padding-left: 10px; padding-right: 10px;"
      >
        <el-card shadow="always" class="float-e-margins">
          <h5>今日销售额</h5>
          <h2>{{ todayjine }}</h2>
        </el-card>
      </el-col>
      <el-col
        :xs="12"
        :sm="8"
        :lg="4"
        style="padding-left: 10px; padding-right: 10px;"
      >
        <el-card shadow="always" class="float-e-margins">
          <h5>今日订单数</h5>
          <h2>{{ todayorder }}</h2>
        </el-card>
      </el-col>
      <el-col
        :xs="12"
        :sm="8"
        :lg="4"
        style="padding-left: 10px; padding-right: 10px;"
      >
        <el-card shadow="always" class="float-e-margins">
          <h5>待审核订单数</h5>
          <h2>{{ dshorder }}</h2>
        </el-card>
      </el-col>
      <el-col
        :xs="12"
        :sm="8"
        :lg="4"
        style="padding-left: 10px; padding-right: 10px;"
      >
        <el-card shadow="always" class="float-e-margins">
          <h5>待发货订单数</h5>
          <h2>{{ dfhorder }}</h2>
        </el-card>
      </el-col>
      <el-col
        :xs="12"
        :sm="8"
        :lg="4"
        style="padding-left: 10px; padding-right: 10px;"
      >
        <el-card shadow="always" class="float-e-margins">
          <h5>已发货订单数</h5>
          <h2>{{ yfhorder }}</h2>
        </el-card>
      </el-col>
    </el-row>
    <div class="orderline">
      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <el-tab-pane
          v-for="(item, index) in 31"
          :key="index"
          :label="numToStr(item) + '号'"
          :name="numToStr(item)"
        >
        </el-tab-pane>
      </el-tabs>
      <div
        id="orderChart"
        :style="{ width: '100%', height: '400px' }"
        v-loading="lineloading"
      ></div>
    </div>
    <div class="orderline">
      <el-date-picker
        v-model="monthdata"
        type="month"
        placeholder="选择月"
        style="margin-bottom: 30px;"
        @change="getData($event)"
        value-format="yyyy-MM"
      >
      </el-date-picker>
      <el-row>
        <el-col :xs="24" :md="24" :lg="12">
          <div
            id="yorderChart"
            :style="{ width: '100%', height: '400px' }"
            v-loading="yloading"
          ></div>
        </el-col>
        <el-col :xs="24" :md="24" :lg="12">
          <div
            id="yporderChart"
            :style="{ width: '100%', height: '400px' }"
            v-loading="yploading"
          ></div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
import * as echarts from "echarts";
import { OrderSummaryApi } from "@/api/orderApi";
import { OrderPriceSummaryDataApi } from "@/api/orderApi";
export default {
  inject: ["reload"],
  data() {
    return {
      loading: true,
      lineloading: true,
      yloading: true,
      yploading: true,
      zjine: 0.0,
      todayjine: 0.0,
      dshorder: 0,
      todayorder: 0,
      dshorder: 0,
      dfhorder: 0,
      yfhorder: 0,
      ordertime: [],
      ordercount: [],
      orderprice: [],
      activeName: "",
      newDate: "",
      yordertime: [],
      yordercount: [],
      ypordertime: [],
      ypordercount: [],
      monthdata: "",
      timer: ""
    };
  },
  mounted() {
    this.addDate();
    this.orderLine();
    this.stringDate(this.activeName);
    this.ordersummaryData(this.newDate, this.monthdata);
    this.yorderline();
    this.yporderline();
    this.timer = setInterval(() => {
      this.ordersummaryData(this.newDate, this.monthdata);
    }, 60000);
  },
  beforeDestroy() {
    clearInterval(this.timer);
  },
  methods: {
    ordersummaryData(val, month) {
      let userdata = JSON.stringify(this.$store.state.user.user.info);
      userdata = JSON.parse(userdata);
      let guestcode = userdata.reguserno;
      let gscode = userdata.gscode;
      let username = userdata.userName;
      let userid = userdata.id;
      let logintype = userdata.logintype;
      let posttype = userdata.posttype;
      OrderSummaryApi({
        guestcode: guestcode,
        gscode: gscode,
        begintime: val,
        endtime: month,
        username: username,
        userid: userid,
        menuename: "OrderSummary",
        menucname: "订单概述",
        logintype: logintype,
        posttype: posttype,
        op_type: "查询"
      }).then(res => {
        this.loading = false;
        this.lineloading = false;
        this.yloading = false;
        this.ordertime = [];
        this.ordercount = [];
        this.orderprice = [];
        this.yordertime = [];
        this.yordercount = [];
        if (res.code == "0") {
          this.zjine = res.data.data[0].zjine;
          if (this.zjine >= 10000) {
            this.zjine =
              (Math.round(this.zjine * 10000) / 10000 / 10000).toFixed(2) +
              "万元";
          }
          this.todayjine = res.data.data[0].todayjine;
          if (this.todayjine >= 10000) {
            this.todayjine =
              (Math.round(this.todayjine * 10000) / 10000 / 10000).toFixed(2) +
              "万元";
          }
          this.dshorder = res.data.data[0].dshorder;
          this.todayorder = res.data.data[0].todayorder;
          this.dshorder = res.data.data[0].dshorder;
          if (guestcode != "IHFFHJ86LC") {
            this.dfhorder = res.data.odata[0].dfhorder;
            this.yfhorder = res.data.odata[0].yfhorder;
          }
          res.data.hdata.forEach(element => {
            this.ordertime.push(element.ddtime + "点");
            this.ordercount.push(element.ordercount);
          });
          res.data.pdata.forEach(element => {
            this.orderprice.push(element.ztotal);
          });
          res.data.mdata.forEach(element => {
            this.yordertime.push(element.dddate);
            this.yordercount.push(element.ordercount);
          });
          this.orderLine(this.ordertime, this.ordercount, this.ztotal);
          this.yorderline(this.yordertime, this.yordercount);
        } else {
          this.ordertime = [];
          this.ordercount = [];
          this.orderprice = [];
        }
      });
      OrderPriceSummaryDataApi({
        guestcode: guestcode,
        gscode: gscode,
        endtime: month
      }).then(res => {
        this.ypordertime = [];
        this.ypordercount = [];
        this.yploading = false;
        if (res.code == "0") {
          res.data.data.forEach(element => {
            this.ypordertime.push(element.dddate);
            this.ypordercount.push(element.ztotal);
          });
          this.yporderline(this.ypordertime, this.ypordercount);
        } else {
          this.ypordertime = [];
          this.ypordercount = [];
        }
      });
    },
    orderLine(ordertime, ordercount, ztotal) {
      let orderChart = this.$echarts.init(
        document.getElementById("orderChart")
      );
      orderChart.setOption({
        title: {
          text: "订单数据曲线图"
        },
        tooltip: {
          trigger: "axis"
        },
        legend: {
          data: ["订单总数", "订单销售额"]
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: this.ordertime
        },
        yAxis: {
          type: "value"
        },
        series: [
          {
            name: "订单总数",
            type: "line",
            stack: "个",
            data: this.ordercount,
            itemStyle: {
              normal: {
                color: "#275F82", //改变折线点的颜色
                lineStyle: {
                  color: "#5470c6" //改变折线颜色
                }
              }
            }
          },
          {
            name: "订单销售额",
            type: "line",
            stack: "元",
            data: this.orderprice,
            itemStyle: {
              normal: {
                color: "#ee6666", //改变折线点的颜色
                lineStyle: {
                  color: "#ff8143" //改变折线颜色
                }
              }
            }
          }
        ]
      });
    },
    yorderline(yordertime, yordercount) {
      let yorderChart = this.$echarts.init(
        document.getElementById("yorderChart")
      );
      yorderChart.setOption({
        title: {
          text: "月订单数（个）"
        },
        tooltip: {
          trigger: "axis"
        },
        xAxis: {
          type: "category",
          data: this.yordertime
        },
        yAxis: {
          type: "value"
        },
        series: [
          {
            data: this.yordercount,
            name: "订单数",
            type: "line",
            stack: "个",
            color: "#275F82",
            lineStyle: {
              color: "#5470c6" //改变折线颜色
            }
          }
        ]
      });
    },
    yporderline(yordertime, ypordercount) {
      let yporderChart = this.$echarts.init(
        document.getElementById("yporderChart")
      );
      yporderChart.setOption({
        title: {
          text: "月销售额（元）"
        },
        tooltip: {
          trigger: "axis"
        },
        xAxis: {
          type: "category",
          data: this.ypordertime
        },
        yAxis: {
          type: "value"
        },
        series: [
          {
            data: this.ypordercount,
            name: "订单销售额",
            type: "line",
            stack: "元",
            color: "#ee6666",
            lineStyle: {
              color: "#ff8143" //改变折线颜色
            }
          }
        ]
      });
    },
    handleClick(tab, event) {
      this.stringDate(tab.name);
      this.lineloading = true;
      this.ordersummaryData(this.newDate, this.monthdata);
    },
    addDate() {
      const nowDate = new Date();
      const date = {
        year: nowDate.getFullYear(),
        month: nowDate.getMonth() + 1,
        date: nowDate.getDate()
      };
      const newmonth = date.month;
      const day = date.date;
      this.activeName = this.numToStr(day);
    },
    stringDate(val) {
      const nowDate = new Date();
      const date = {
        year: nowDate.getFullYear(),
        month: nowDate.getMonth() + 1,
        date: nowDate.getDate()
      };
      const newmonth = date.month >= 10 ? date.month : "0" + date.month;
      const day = val >= 10 ? val : "0" + val;
      this.monthdata = date.year + "-" + newmonth;
      this.newDate = date.year + "-" + newmonth + "-" + day;
    },
    numToStr(num) {
      num = num.toString();
      return num;
    },
    getData(val) {
      this.yloading = true;
      this.yploading = true;
      this.ordersummaryData(this.newDate, val);
    }
  }
};
</script>
<style lang="scss">
.page-content {
  width: 100%;
  height: 100%;
  .float-e-margins {
    text-align: center;
    margin-bottom: 10px;
    h5 {
      font-size: 16px;
      margin-bottom: 15px;
      color: #333;
    }
    h2 {
      font-size: 26px;
      color: #ff8143;
    }
  }
  .orderline {
    margin-top: 50px;
  }
}
</style>
